<template>
  <div id="detail">
    <div class="total_grade">
      <h1 class="total_grade_title">总战绩</h1>
      <div class="chart_pie" ref="pie">
      </div>
    </div>

    <ul>
      <li v-for="item in totalData" :key="item.acitivityId">
        <div class="grade">
          <h1>{{item.activityName}}</h1>
          <ul class="table">
            <li>对局数</li>
            <li>胜</li>
            <li>平</li>
            <li>负</li>
            <li>胜率</li>
            <li>最大得分</li>
          </ul>
          <ul class="table table_grade">
            <li v-for="item in [item.totalCount,item.win,item.draw,item.lose,item.winRate,item.maxScore]" :key="item">{{item}}</li>
          </ul>
        </div>
      </li>
    </ul>


  </div>
</template>


<script>
// import echarts from "echarts";
var echarts = require("echarts/lib/echarts");
// 引入柱状图
require("echarts/lib/chart/pie");
// 引入提示框和标题组件
require("echarts/lib/component/legend");
import utils from "../../scripts/utils";
import axios from "axios";
import qs from "qs";
export default {
  data() {
    return {
      totalData: []
    };
  },
  created() {
    let url =
      "native://?action=" + "settitle&title=" + encodeURIComponent("战绩详情");
    utils.native_call(url);
  },
  mounted() {
    axios
      .post(
        "/api/recorddetail",
        qs.stringify({
          gameType: this.$route.params.gameType
        })
      )
      .then(res => {
        let data = res.data.activities;
        let pieData = [];
        this.totalData = data;
        for (let a = 0; a < data.length; a++) {
          pieData.push({
            value: data[a].totalCount,
            name: data[a].activityName
          });
        }
        return pieData;
      })
      .then(data => {
        this.drawPieChart(data);
      });
  },
  methods: {
    drawPieChart(data) {
      let names = [];
      data.forEach(function(item) {
        names.push(item.name);
      });
      var myChart = echarts.init(this.$refs.pie);
      // 绘制图表
      myChart.setOption({
        color: [
          "#d6cdbc",
          "#ffb52e",
          "#f96f0c",
          "#f05785",
          "#c97d5d",
          "#8f4731",
          "#ef0100",
          "#eb1749",
          "#b8df82",
          "#63d2ae",
          "#48ad9f",
          "#2c484c",
          "#6d802f",
          "#654d5b",
          "#366158",
          "#2d5b6b"
        ],
        legend: {
          orient: "vertical",
          left: "5%",
          top: "15%",
          textStyle: {
            fontWeight: "normal", //标题颜色
            color: "#FFFFFF"
          },
          itemWidth: 10,
          itemHeight: 10,
          data: names
        },
        series: [
          {
            center: ["75%", "50%"],
            name: "总战绩",
            clockwise: false,
            avoidLabelOverlap: false,
            type: "pie",
            data: data,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold"
                }
              }
            }
          }
        ]
      });
    }
  }
};
</script>



<style scoped>
#detail {
  color: #fff;
  padding: 0.3rem 0.14rem 0;
  text-align: center;
}

.total_grade,
.grade {
  background: url("../images/title_bg.png") center top no-repeat;
  background-color: #001523;
  background-size: 2.27rem 0.4rem;
  border-radius: 0.1rem;
  box-shadow: 0 0 0.2rem #1c5d86;
}

.total_grade {
  position: relative;
  height: 3.5rem;
}

.total_grade_title {
  font-size: 0.3rem;
}

.chart_pie {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.table {
  display: flex;
}

.table li {
  border: 2px solid #062d49;
  border-right-width: 0;
  flex-basis: 0;
  flex-grow: 1;
  padding: 0.2rem 0;
}

.table li:first-child {
  border-left-width: 0;
}

.table_grade li {
  border-top-width: 0;
}

.grade {
  margin-top: 0.22rem;
  position: relative;
}

.grade h1 {
  font-size: 0.3rem;
  height: 0.4rem;
  line-height: 0.4rem;
}

.detail {
  background: url("../images/more_bg.png") no-repeat;
  background-size: cover;
  height: 0.4rem;
  position: absolute;
  right: 0;
  top: 0;
  width: 0.84rem;
}

.line {
  height: 4.2rem;
  width: 100%;
}
</style>
